<script setup>
import { message } from './util';
const clickHandler = () => {
  message('回答','不简单好吧~');
}
const clickHandler2 = () => {
  message('回答','比React简单吧');
}
</script>

<template>
  <header>
    <img class="logo" src="./assets/logo.svg" />
    Hello VUE@3.0
  </header>
  <div @click="clickHandler" class="button">Vue 简单吗？</div>
  <div @click="clickHandler2" class="button">真的简单吗？</div>
</template>

<style scoped>
header {
  height: 60px; line-height: 60px; font-size: 16px; padding: 0 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
}
img { 
  height: 40px; float: left; margin: 10px 10px 10px 0;
}

.button{
  line-height: 30px; text-align: center; width: 200px; margin: 10px;
  border-radius: 8px; border: 1px solid #ccc; display: inline-block;
}

</style>
